<template>
	<view class="logo" :style="{height:(windowHeight)+'px'}">
		<view class="logo_item" :style="{height:(windowHeight)+'px'}">
			<image class="logo_item_bg" src="../../../static/image/login/loginBg.jpg"></image>
			<view class="logo_item1">
				<view class="logo_back" :style="{marginTop:(statusBarHeight)+'px'}">
					<image src="../../../static/image/icon/fanhui.png" @click="getBack"></image>
				</view>
				<view class="logo_item1_img" :style="{marginTop:(statusBarHeight+60)+'px'}">
					<image src="../../../static/image/login/logo.png"></image>
				</view>
				<view class="logo_item1_btn">
					<!-- :class="item.name" v-for="(item, key) in providerList"
					@tap="tologin(item)" :key="key" -->
					<!-- open-type="getUserInfo" withCredentials="true"
				@getuserinfo="getUserInfo" -->
					<button class="btn" type='primary' @tap="getUserProfile">
						<text class="iconfont icon-weixin"></text>
						<text class="name">微信登录</text>
					</button>

				</view>
				<view class="xieyi">登录代表你同意祥米科技《用户协议》和《隐私政策》</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 导航栏高度
				statusBarHeight: 0,
				submitDisabled: true,
				providerList: [],
				loginRes: {},
				pageroute: '',
				windowHeight: 0,
				userInfo: {
					avatarUrl: '',
					nickName: null,
					gender: 0
				}
			};
		},
		methods: {
			// 返回上一页
			getBack() {
				// uni.reLaunch({
				// 	url:'../../mine/mine'
				// })
				uni.navigateBack({
					delta: 1
				})
			},
			// 获取用户信息
			getUserProfile() {
				
				uni.getUserProfile({
					desc: '用户完善资料',
					success: (infoRes) => {
						this.userInfo = infoRes.userInfo;
						// 调用登录接口
						this.tologin();


					}
				})
				// uni.getUserInfo({
				// 	provider:'weixin',
				// 	success:(infoRes)=>{
				// 		this.userInfo=infoRes.userInfo
				// 		this.tologin() ;
				// 		console.log('infoRes',infoRes)
				// 	}
				// })
			},
			// 第三方登录
			tologin() {
				// console.log('provider',provider);
				var platform = this.providerList[0].platform
				var provider = this.providerList[0].id
				uni.showLoading({
					title: '登录中'
				});
				// #ifndef MP-ALIPAY
				uni.login({
					provider: provider,
					// #ifdef MP-ALIPAY
					scopes: 'auth_user', //支付宝小程序需设置授权类型
					// #endif
					success: (loginRes) => {
						console.log('loginRes', loginRes)
						this.$api.post({
							url: '/wanlshop/user/third',
							data: {
								platform: platform,
								loginData: loginRes,
								avatarUrl: this.userInfo.avatarUrl,
								nickName: this.userInfo.nickName,
								gender: this.userInfo.gender,
								client_id: uni.getStorageSync("wanlshop:chat_client_id") ? uni
									.getStorageSync("wanlshop:chat_client_id") : null
							},
							success: res => {
								console.log('登录成功', res)
								uni.hideLoading();
								// if (res.binding == 0) {
								// this.$wanlshop.to(`/pages/user/perfect/perfect?third_id=${2}&platform=${provider.platform}&url=${this.pageroute}`
								// );
								// }
								//  else {
									this.$store.dispatch('user/login', res);
									this.$store.dispatch('cart/login');
									this.$store.dispatch('chat/get');
									uni.navigateTo({
										url: '../../RoleSelection/RoleSelection'
									})
								// }
							}
						});
						// 隐藏键盘
						uni.hideKeyboard();
					},
					fail: err => {
						this.$wanlshop.msg(err.msg);
					}
				});
				// #endif

			},
			// 计算系统屏幕的高度
			GetStatusBarHeight() {
				let that = this;
				uni.getSystemInfo({
					// 获取系统屏幕的高度
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
						that.windowHeight = res.windowHeight

						console.log('状态栏高度', res)
					},
				});
			},
		},
		onLoad(option) {
			//调用系统屏幕尺寸函数
			this.GetStatusBarHeight();
			// let page = this.$wanlshop.prePage().$mp.page;
			// this.pageroute = encodeURIComponent(`/${page.route}?${this.queryParams(page.options)}`);
			// console.log('pageroute',this.pageroute)

			// 获取第三方登录
			// #ifndef H5
			uni.getProvider({
				service: 'oauth',
				success: (res) => {
					console.log('res用户信息', res)
					this.providerList = res.provider.map((value) => {
						let providerName = '';
						let platform = '';
						switch (value) {
							case 'weixin':
								providerName = 'wlIcon-WeChat';
								// #ifdef MP
								platform = 'mp_weixin';
								// #endif
								// #ifdef APP-PLUS
								platform = 'app_weixin';
								// #endif
								break;
							case 'qq':
								providerName = 'wlIcon-QQ'
								// #ifdef MP
								platform = 'mp_qq';
								// #endif
								// #ifdef APP-PLUS
								platform = 'app_qq';
								// #endif
								break;
							case 'sinaweibo':
								providerName = 'wlIcon-WeiBo'
								platform = 'app_weibo';
								break;
							case 'xiaomi':
								providerName = 'wlIcon-Xiaomi'
								platform = 'app_xiaomi';
								break;
							case 'apple':
								providerName = 'wlIcon-Apple'
								platform = 'apple';
								break;
						}
						return {
							id: value,
							name: providerName,
							platform: platform
						}
					});
					console.log('providerList', this.providerList)
				},
				fail: (error) => {
					console.log('获取登录通道失败', error);
				}
			});
			// #endif
			// #ifdef H5
			// 未来版本开发
			// this.providerList = [{
			// 	name: 'wlIcon-QQ',
			// 	platform: 'web_qq'
			// }];
			// #endif

			// 防止刷新登录态，uni.login code提前获取
			// #ifdef MP-WEIXIN
			uni.login({
				provider: 'weixin',
				success: res => {
					console.log('登录', res)
					this.loginRes = res;
				},
				fail: err => {
					this.$wanlshop.msg(err.msg);
				}
			});
			// #endif

		}
	}
</script>

<style lang="scss">
	.logo {
		width: 750rpx;
		// height: 1334rpx;
		position: relative;
		background-color: #FFFFFF;


		.logo_item {
			width: 750rpx;
			// height: 1334rpx;
			background-size: cover;
			overflow: hidden;

			.logo_item_bg {
				width: 100%;
				height: 100%;
			}

			.logo_item1 {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;

				.logo_back {
					// background-color: pink;
					display: flex;
					align-items: center;
					height: 80rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-left: 25rpx;
					}

				}

				&_img {
					// background-color: #007AFF;
					width: 450rpx;
					height: 130rpx;
					margin: 0 auto;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&_btn {
					width: 700rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 70rpx;
					margin: 400rpx auto;
					background-color: #FFFFFF;
					border-radius: 50rpx;

					.btn {
						width: 700rpx;
						height: 80rpx;
						line-height: 80rpx;
						background-color: #FFFFFF;

						.iconfont {
							color: #45a60a;
							font-size: 40rpx;
						}

						.name {
							font-size: 28rpx;
							color: #010101;
							margin-left: 10rpx;
						}

					}
				}

				.xieyi {
					// background-color: pink;
					margin: 0 auto;
					font-size: 24rpx;
					text-align: center;
					color: #FFFFFF;
					// margin-top: 200rpx;
				}
			}
		}
	}
</style>
